import React, { useEffect, useState, useRef } from 'react'
import { Button, View, Image, Input, ScrollView } from '@tarojs/components'
import styles from './index.module.scss'

export default function HorizontalList(props) {
  const [content, setContent] = useState<any>([
    { text: '今天的天气怎么样', id: '1', type: 'text', status: 'ask' },
    { text: '如何获取更多的企业咨询', id: '2', type: 'text', status: 'ask' },
    { text: '法国工业区', id: '6', type: 'text', status: 'ask' },
    { text: '我感觉心情不好该怎么办', id: '3', type: 'text', status: 'ask' },
    { text: '企业有多少家门头沟区', id: '4', type: 'text', status: 'ask' },
    { text: '世界最高峰', id: '5', type: 'text', status: 'ask' }
  ])

  useEffect(() => {
    return () => {}
  }, []) // 这是因为 config 状态在组件挂载时被初始化了一次，并且在 useEffect 中被设置为依赖项为空数组 []，这意味着 recorderManager 的事件监听器只会在组件首次挂载时设置一次，而不会随着 config 的变化而重新设置。

  return (
    <ScrollView className={styles['horizontalList']} scrollX enableFlex>
      {content.map((item, index) => {
        return (
          <View
            className={styles['content_list_item']}
            key={index}
            onClick={() => {
              props.emitDataList(item)
              props.changeHeight(0)
            }}
          >
            {item.text}
          </View>
        )
      })}
    </ScrollView>
  )
}
